<template>
    <div v-if="shop" id="finish">
    <!-- <div v-if="shop && protector && layoutPic && defenceArea" id="finish"> -->
        <section id="title">
            <img :src="img_3" alt="">
            <span>安防配置成功</span>
        </section>
        
        <div>
            <p>
                <img :src="img_1" alt="">
                <a :href="'security.html#/security/' + shop.id">{{shop.id}}</a>
                店的安防设备已配置完成
            </p>
            <p>点击可查看
                <a :href="'security.html#/security/' + shop.id">门店状态与详情</a>
                或
                <a href="#">返回首页</a>
            </p>
        </div>
    </div>
    <span v-else id="NotFinish">
        <img :src="img_2" alt="">
        未选择相关门店
    </span>
</template>

<script>
import {mapState} from 'vuex'
import img_3 from "./assets/3.png"
import img_2 from "./assets/2.png"
import img_1 from "./assets/1.png"

export default {
    name:'finish',
    data (){
        return {
            img_1 : img_1,
            img_2 : img_2,
            img_3 : img_3,
        }
    },
    computed: {
        ...mapState(['shop','protector','layoutPic','defenceArea'])
    },

}
</script>

<style>
#finish{
    width: 800px;
    margin:200px 0px 0px 300px;
}
#finish #title{
    margin: 20px auto;
    width: 300px;
    font-size: 24px;
    font-weight: bold;
}
#finish p{
    font-size: 20px;
    text-align: center;
    margin-bottom: 10px;
}
#finish div{
    padding-top: 50px;
    width: 100%;
    height: 200px;
    background-color: #9fd3f1;
}
#finish a{
    color:#0078c1;
}
#NotFinish{
    display: block;
    text-align: center;
    line-height: 200px;
    width: 800px;
    height: 200px;
    color: white;
    background-color: #0078c1;
    font-size: 32px;
    margin-left: 300px ;
    margin-top: 200px;
}
#NotFinish span{
    font-size: 50px;
    color: red;
    display: inline-block;
    margin-right: 50px; 
}
</style>

